<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">角色管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="角色名">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
				  <table class="table table-hover">
					<thead>
						<tr>
						    <th>序号</th>
							<th>角色名称</th>
							<th>备注</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>创建用户</th>
							<th>修改用户</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					</tbody>
				  </table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
            </div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   $(function(){
	   $("#pageId").load("/modules/common/page.html",doGetObjects);
	  $(".input-group-btn")
	  .on("click",".btn-search",doQueryObjects)
	  .on("click",".btn-add",doLoadEditUI)
	  $("#tbodyId")
	  .on("click",".btn-update",doLoadEditUI) 
   });
   function doLoadEditUI(){
	   let title;
	   if($(this).hasClass('btn-add')){
		   title="添加角色";
		   doLoadPageUI(title);
	   }else{
		   title="修改角色"
		   let id=$(this).parents("tr").data("id");
		   let url=`${baseUrl}/role/${id}`;
		   $.ajax({url:url,crossDomain:true,xhrFields:{withCredentials: true},success(result){
			   if(result.state==1){
				  result.data.id=id;//在结果中动态追加id
				  $("#mainContentId").data("data",result.data);
				  doLoadPageUI(title);//异步加载页面  
			   }else{
				  alert(result.message); 
			   }
		   }});
	   }
   }
   function doLoadPageUI(title){
	   let url="/modules/sys/role_edit.html"
	   $("#mainContentId")
	   .load(url,function(){
		   $(".box-title").html(title);
	   })
   }
   function doQueryObjects(){
	   $("#pageId").data("pageCurrent",1);
	   doGetObjects();
   }
   function doGetObjects(){
   	    debugger
	   //1.params
	   //获取在Page.html中绑定的当前页码值
	   let pageCurrent=$("#pageId").data("pageCurrent");
	   let params={"pageCurrent":pageCurrent};
	   //获取查询时用户输入的名字
	   let name=$("#searchNameId").val();
	   if(name)params.name=name;
	   //2.url
	   let url=`${baseUrl}/role/`;
	   //3.ajax request
	   $.ajax({url:url,data:params,crossDomain:true,xhrFields:{withCredentials:true},success(result){
		debugger
	   	doHandleResponseResult(result);
	   }});
   }
   function doHandleResponseResult(result){
	   
	   if(result.state==1){
		  doSetTableBodyRows(result.data.list);
		  doSetPagination(result.data);//page.html
	   }else{
		  doSetTableBodyErrors(result.message);
	   }
   }
   function doSetTableBodyErrors(message){
	   //获取body对象并清空
	   let tBody=$("#tbodyId");
	   tBody.empty();
	   //创建tr对象
	   let tr=$("<tr></tr>");
	   //创建td对象
	   let len=$("table th").length;
	   let td=$("<td></td>");
	   td.prop("colspan",len);
	   td.append(message);
	   tr.append(td);
	   //将tr追加到tbody
	   tBody.append(tr);
   }
   function doSetTableBodyRows(records){
	  //获取tbody对象,并清空
	   let tBody=$("#tbodyId");
	   tBody.empty();
	   //2.迭代数据,并追加到tBody
	   records.forEach((item,i)=>{
		  //2.1构建tr对象
		  let tr=$("<tr></tr>");
		  tr.data("id",item.id);
		  //2.2构建tds对象
		  let tds=doCreateTds(item,i);
		  //2.3将tds对象追加到tr中
		  tr.append(tds);
		  //2.4将tr追加到tbody中
		  tBody.append(tr);
	   })
   }
   function doCreateTds(row,i){
	   let tds= `<td>${i+1}</td>
	   <td>${row.name}</td>
       <td>${row.remark}</td>
       <td>${row.createdTime}</td>
       <td>${row.modifiedTime}</td>
       <td>${row.createdUser}</td>
       <td>${row.modifiedUser}</td>
       <td><a class='btn-update'>update</a></td>`;
       return tds;
   }
</script>
